<template>
    <div class="addAddress">
        <v-navbar v-on:saveAddress='saveAddress' />
        <div class="addAddress_container">
            <div class="s_u_f_label addAddres_formBack">
                <div class="suf_l_title">
                    <div class="sufl_t_test">收货人</div>
                </div>
                <div class="suf_l_inputCon">
                    <input class="suf_l_input" maxlength="50" type="text" v-model="consignee">
                </div>
            </div>

            <div class="s_u_f_label">
                <div class="suf_l_title">
                    <div class="sufl_t_test">联系电话</div>
                </div>
                <div class="suf_l_inputCon">
                    <input class="suf_l_input" maxlength="11" type="text" v-model="phone">
                </div>
            </div>

            <div class="s_u_f_label">
                <div class="suf_l_title">
                    <div class="sufl_t_test">所在地区</div>
                </div>
                <div class="suf_l_inputCon">
                    <input class="suf_l_input" type="text" v-model="address" readonly>
                    <div class="suf_l_imgCodeBtn suf_l_sel">
                        <span @click="e_openselect">请选择></span>
                    </div>
                </div>
            </div>

            <div class="s_u_f_label s_u_f_textarealabel">
                <textarea class="s_u_f_textarea" maxlength="255" rows="3" cols="20" placeholder="请填写详细地址，不少于5个字" v-model="area"></textarea>
            </div>
        </div>
        <div class="addAddress_oterbtn" v-if="!addressId">
            <span>设为默认</span>
            <i-switch v-model="switch1" />
        </div>

        <!-- <div class="addAddress_otherInput">
            <span class="otherInputTitle">备注</span>
            <input class="suf_l_input" type="text">
        </div> -->

        <!-- 三级联动 -->
        <v-select v-if="isSel" v-on:cancelSel='cancelSel' v-on:getArea='getArea' />
    </div>
</template>
<script>
import navbar from '@c/navbar/navbar'
import Button from '@c/button/button'
import { mapState, mapMutations } from 'vuex'
import { vpost, sonpost, fpost, gpost, vlink } from '@api/axios'
import { tokenPost, jtpost, gtpost, tokenLink, jtget } from '@api/axiosByToken'
import select from './select'
export default {
	name: 'addAddress',
	data() {
		return {
			switch1: true,
			isSel: false,
			consignee: '', //收货人
			phone: '', //电话
			areas: '', //所在地区
			address: '',
			area: '', //详细地址
			addressId: '',
		}
	},
	components: {
		'v-navbar': navbar,
		'v-button': Button,
		'v-select': select,
	},
	computed: {
		...mapState(['wtitle', 'rback']),
	},
	methods: {
		...mapMutations(['WTITLE', 'RBACK']),
		// ======================================================修改进入该页面👇=========================================================//
		getEditData() {
			let addressID = this.$route.params.addressId
			console.log(addressID)
			if (addressID) {
				this.addressId = addressID
				this.getEditInfo(addressID)
			}
		},
		// 获取要修改的地址详情
		getEditInfo(addressID) {
			let getData = {
        id: addressID
			}
			this.$store.state.loadding = true
			tokenPost(tokenLink.address.updateAddress, getData).then(re => {
				this.$store.state.loadding = false
				if (re.status == 0) {
					let addressData = re.data.count[0]
					console.log(re)
					this.consignee = addressData.consignee
					this.phone = addressData.phone
					this.address = `${addressData.pName} ${
						addressData.cName
					} ${addressData.aName}`
					this.areas = `${addressData.pName},${addressData.cName},${
						addressData.aName
					}`
					this.area = addressData.realName
					this.switch1 = Boolean(addressData.isDefault)
				}
			})
		},
		// ======================================================修改进入该页面👆=========================================================//

		// ======================================================获取三级联动地址👇========================================================//
		getArea(v) {
			console.log('地区获取', v)
			this.areas = v.join(',')
			this.address = v.join(' ')
		},
		// ======================================================获取三级联动地址👆========================================================//
		// ======================================================执行保存收货地址👇========================================================//
		// 保存前的检查
		beforeCheck() {
			let saveData = {
				consignee: this.consignee,
				phone: this.phone,
				userId: localStorage.getItem('userId'),
				address: this.areas,
				area: this.area,
				isDefault: Number(this.switch1),
				id: this.addressId,
			}
			if (saveData.consignee == '') {
				this.$Message.warning('请输入收货人姓名')
				return
			}
			if (saveData.phone == '') {
				this.$Message.warning('请输入收货人手机号')
				return
			}
			if (saveData.address == '') {
				this.$Message.warning('请选择地区')
				return
			}
			if (saveData.area == '') {
				this.$Message.warning('请输入详细收货地址')
				return
			}
			this.doSave(saveData)
		},
		// 执行保存
		doSave(saveData) {
			this.$store.state.loadding = true
			tokenPost(tokenLink.address.saveAddress, saveData).then(re => {
				this.$store.state.loadding = false
				if (re.status == 0) {
					if (this.addressId) {
						this.$Message.success('修改成功')
					}
					this.$Message.success(re.msg)
					this.$router.back(-1)
					this.clearForm()
				} else {
					this.$Message.error(re.msg)
				}
			})
		},
		clearForm() {
			this.consignee = ''
			this.phone = ''
			this.areas = ''
			this.address = ''
			this.area = ''
		},
		// 保存收货地址
		saveAddress() {
			this.beforeCheck()
		},
		// ======================================================执行保存收货地址👆========================================================//
		// =====================================================打开弹框关闭弹框骚操作👇===================================================//
		e_openselect() {
			this.isSel = true
		},
		cancelSel(v) {
			this.isSel = v
		},
		// =====================================================打开弹框关闭弹框骚操作👆===================================================//
	},
	created() {
		this.WTITLE('添加收货地址')
		this.RBACK(true)
	},
	mounted() {
		// 获取修改参数
		this.getEditData()
	},
}
</script>

